<template>
  <view class="main">
    <view class="swiper">
      <swiper class="swiper-list" indicator-dots indicator-color="#eee" indicator-active-color="#fa436a" interval="3000" :autoplay="autoplay" :duration="duration" @change="swiperChange" :circular="circular">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <view class="swiper-item">
            <view class="swiper-item-img">
              <image style="width: 100vw;height: 100vh;" :src="item.image" mode="aspectFill" @click="goto(item)"></image>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <!-- <view class="experience" @tap="launchFlag()" v-if="swiperCurrent+1 == swiperLength || swiperList.length==1">{{ experience }}</view> -->
      <view class="jumpover" @tap="launchFlag()">{{ jumpover }}</view>
    </view>
  </view>
</template>

<script>
import api from '@/api/index.js';
export default {
  data() {
    return {
      titleNViewBackground: '',
      swiperCurrent: 0,
      swiperLength: 0,
      swiperList: [],
      autoplay: true,
      duration: 500,
      circular: true,
      jumpover: '跳过',
      experience: '立即体验',
      time: 2,
      ifFlag: true
    };
  },
  onLoad() {
    this.swiperLength = this.swiperList.length;
    // this.titleNViewBackground = this.swiperList[0].bgColor;
    this.jumpover = this.time + 's跳过'
    // this.jumpover = '跳过'
    this.findguideHttp()
  },
  methods: {
    //轮播图切换修改背景色
    swiperChange(e) {
      const index = e.detail.current;
      this.swiperCurrent = index;
      this.swiperLength = this.swiperList.length;
      // this.titleNViewBackground = this.swiperList[index].bgColor;
    },
    launchFlag: function () {
      /**
       * 向本地存储中设置launchFlag的值，即启动标识；
       */
      if (this.ifFlag) {
        this.ifFlag = false
        if (uni.getStorageSync('token') || this.ifFlag) {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        } else {
          uni.setStorageSync('launchFlag', true);
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }
      }


    },
    // 获取启动图
    findguideHttp() {
      const self = this
      api.base.getOpenGif({ name: 'open_gif' }).then(res => {
        this.swiperList.push({ image: res.data })
        console.log(this.swiperList)
        if (this.swiperList.length == 0) {
          self.launchFlag()
        } else {
          setInterval(function () {
            self.time--
            self.jumpover = self.time + 's跳过'
            if (self.time == 0) {
              self.launchFlag()
            }
          }, 1000)
        }
      });
    },
    goto(item) {

      // #ifdef APP-PLUS
      console.log('跳转')
      uni.navigateTo({
        url: 'plugin://NativePlugin/webview?' + item.url
      })
      //   uni.navigateTo({ url: 'plugin://NativePlugin/webview?url=http://www.uniapp.com' })
      // #endif

    }
  }
};
</script>
<style>
page,
.main {
  width: 100%;
  height: 100%;
  padding: 0;
  background-size: 100% auto;
}

.swiper {
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
}

.swiper-list {
  width: 100%;
  height: 100%;
}

.swiper-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: center;
}

.swiper-item-img {
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.swiper-item-img image {
  width: 100%;
  height: 100%;
}

.jumpover,
.experience {
  position: absolute;
  z-index: 999;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 40rpx;
  font-size: 32rpx;
  color: #fff;
  border: 2rpx solid #fff;
  border-radius: 30rpx;
  background-color: rgba(0, 0, 0, 0.3);
}

.jumpover {
  right: 30rpx;
  top: 90rpx;
}

.experience {
  right: 50%;
  bottom: 140rpx;
  margin-right: -116rpx;
}
</style>